{extend name="base"}
{block name="main"}

<div id="app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	
	<el-row class="ws-quote">
		<el-col :span="12">
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button type="primary" size="small" @click="href('{:url(\'index\')}')">返回列表</el-button>
			<el-button type="primary" size="small" @click="onGet('{:url(\'back\')}',true)">还原</el-button>
		</el-col>
		<el-col :span="12" style="text-align: right;">
			<el-form :model="params" inline label-width="0px" size="small">
				<el-form-item label="">
				    <el-input v-model="params.val" placeholder="手机号码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="params.type" placeholder="请选择">
						<el-option
						  label="全部"
						  value="-1">
						</el-option>
						<el-option
						  label="未处理"
						  value="0">
						</el-option>
						<el-option
						  label="查询队列中"
						  value="3">
						</el-option>
						<el-option
						  label="微信号"
						  value="1">
						</el-option>
						<el-option
						  label="非微信号"
						  value="2">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" size="mini" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" align="center" label="ID" width="100"></el-table-column>
		<el-table-column prop="tel" align="center" label="手机号码"></el-table-column>
		<el-table-column prop="status" align="center" label="状态/类型" :formatter="statusFormats" sortable></el-table-column>
		<el-table-column prop="s_time" align="center" label="导入时间" :formatter="dateFormats" sortable></el-table-column>
		<el-table-column prop="e_time" align="center" label="查询时间" :formatter="eTimeFormats" sortable></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<div class="page">{$list->render()|raw}</div>

	<!-- 导入Excel 区域 -->
	<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
	<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
	<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

	<ws-excel :area="area" @ext-error="error" :title="title" :options="options" v-model="show" @change="change"></ws-excel>
	
	<!-- 查询手机号是否为微信号 弹框 -->
	<el-dialog title="分批查询手机号码是否为微信号" :visible.sync="dialogVisible">
		<el-row class="ws-quote">
			当前在线设备(不选将默认所有设备执行)
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-checkbox-group v-model="checkDevs">
				    <el-checkbox style="margin:3px 15px;" :label="v.id.toString()" v-for="v of devs">{{v.name}}</el-checkbox>
				</el-checkbox-group>
			</el-col>
			<el-col :span="24" class="p_y20">
				<el-button type="primary" size="mini" @click="checkAll">全选/取消</el-button>
			</el-col>
		</el-row>
		<el-row class="ws-quote">
			其它配置
		</el-row>
		<el-row>
			<el-form ref="form" label-width="120px">
				<el-form-item label="每次查询数量">
					<el-input-number v-model="nums" :min="1" size="small"></el-input-number>
				</el-form-item>
			</el-form>
		</el-row>
		<div slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="_wspost('{:url(\'queryWeixin\')}',{checkDevs,nums},queryWeixin)">确 定</el-button>
		</div>
	</el-dialog>
</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		nav:{$_nav|stripslashes|raw}, 
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},
		tableData:{$list->toJson()|raw}, // 列表数据

		// 导入相关
		options:['手机号码'],
		show:false,
		title:'手机号码导入',
		area:['400','400'],


		dialogVisible:false,
		devices:[], // 在线设备ID组
		devs:[], //在线设备
		checkDevs:[], //选中的设备
		nums:15, //每次查询数量
	},
	created(){
		this.init();
	},
	methods:{
		init(){
			if(socket){
				// 获取在线设备
				socket.on('getUsers',data=>{
				    if(data){
				    	this.devices=data;
				    	this.checkDevs=data;
				    	this.getData(data);
				    }
				})
				socket.emit('getUsers',{});
			}

		},
		// 载入所有在线设备信息
		getData(ids){
			ids=ids||this.devices;
			$.post("{:url('getDevices')}",{ids},res=>{
				let data=res.data;
				if(!data){
					data=[];
				}else if(data&&typeof data ==='string'){
					data=JSON.parse(data);
				}
				this.devs=data;
			})
		},
		// 查询
		search(){
			let params=this.params,queryStr='';
			for(let key in params){
				if(queryStr.length>0){
					queryStr+='&';
				}else{
					queryStr+='?';
				}
				queryStr+=key+'='+params[key];
			}
			location.href="{:url('')}"+queryStr;
		},
		// 全选/取消 设备
		checkAll(){
			if(this.checkDevs.length===this.devices.length){
				this.checkDevs=[];
			}else{
				this.checkDevs=this.devices;
			}
		},
		// 执行查询手机号码任务
		queryWeixin(res){
			this.dialogVisible=false;
			// let checkDevs=this.checkDevs,nums=this.nums;
			// $.post("{:url('queryWeixin')}",{checkDevs,nums},res=>{
			// 	if(){

			// 	}
			// },'json')
		},
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		// 显示导入框
		showExcel(show=true){
			this.show=show;
		},
		change(data){
			this._wspost("{:url('addAll')}",{data});
			this.showExcel(false);
		},
		error(ext){
			this.$message({
				message:'错误的文件后缀名：'+ext,
				type:'error'
			})
		},
		// 状态格式化
		statusFormats(row, column, cellValue, index){
			if(cellValue==1){
				return '微信号';
			}else if(cellValue==2){
				return '非微信号';
			}else if(cellValue==3){
				return '查询队列中';
			}else{
				return '未处理';
			}
		},
		// 查询时间格式化
		eTimeFormats(row, column, cellValue, index){
			if(!cellValue){
				return '待查询';
			}
		    return this.dateFormat(cellValue*1000,'Y-m-d H:i');
		},

	}
});
</script>

{/block}